<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增角色')" />
	<th:block th:include="include :: ztree-css" />
	<style>
		.uploadImgBtn {

			width: 100px;
			height: 100px;
			cursor: pointer;
			position: relative;
			/*background: url("plus.jpg") no-repeat;*/
			/*background: url("plus.jpg") no-repeat;*/

			-webkit-background-size: cover;
			background-size: cover;
		}

		.uploadImgBtn .uploadImg {
			position: absolute;
			right: 0;
			top: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			cursor: pointer;
		}
		.pic{
			width: 100px;
			height: 100px;
		}
		.pic img {
			width: 100%;
			height: 100%;
		}


	</style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
	<form class="form-horizontal m" id="form-Commodity-add">
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">品牌名称：</label>
			<div class="col-sm-8">
				<input class="form-control" type="text" name="brandName" id="brandName" required>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">品牌首字母：</label>
			<div class="col-sm-8">
				<input class="form-control" type="text" name="brandFirstLetter" id="brandFirstLetter"  required>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">品牌logo：</label>
			<div class="col-sm-8">
				<input class="form-control" type="text"  name="brandLogo" id="brandLogo"  required>[[*{brandLogo}]]
			</div>
		</div>
	</form>
	<div  id="uploadImgBtn">
		<label class="col-sm-3 control-label">上传图片：</label>
		<div class="col-sm-8 control-div">
			<!--				<input id="file" name="url"  type="file" onchange="uploadFile('url')">-->
			<input  class="uploadImg" style="position:absolute;opacity:0;" type="file" name="url" id="file" accept="image/gif,image/jpeg,image/x-png" onchange="uploadFile('url')"/>
			<img style="width: 60px;height: 60px;" src="../img/timg (1).jpg">
			<!--				<textarea id="url" name="url" class="form-control" readonly rows="4">-->
			<!-- 				[[*{url}]]</textarea>-->
			<!--				 <input id="url" name="url" class="form-control" type="hidden">-->
		</div>
	</div>
</div>


<!--			<div  method="post" enctype="multipart/form-data" id="uploadImgBtn">-->
<!--			<input type="file" name="file" multiple id="file" />-->
<!--			<button type="btn" id="btn" name="btn">上传</button>-->
<!--			</div>-->

<!--<div id="formBox">-->
<!--	<form id="formTag1" enctype="multipart/form-data">-->
<!--		<div class="uploadImgBtn" id="uploadImgBtn">-->
<!--			<input class="uploadImg" type="file" name="file" id="file1">-->
<!--		</div>-->
<!--	</form>-->
<!--</div>-->


	<th:block th:include="include :: footer" />
	<th:block th:include="include :: ztree-js" />
	<script type="text/javascript">


		var prefix = ctx + "Brand";
		function submitHandler() {
			if ($.validate.form()) {
				$.operate.save(prefix + "/addSave", $('#form-Commodity-add').serialize());
			}
		}

		function doSubmit(index, layero){
			var body = layer.getChildFrame('body', index);
			$("#treeId").val(body.find('#treeId').val());
			$("#treeName").val(body.find('#treeName').val());
			layer.close(index);
		}


				$(document).ready(function(){
				// 	//为外面的盒子绑定一个点击事件
					$("#uploadImgBtn").click(function(){
						/*
		                1、先获取input标签
		                2、给input标签绑定change事件
		                3、把图片回显
		                 */
		//            1、先回去input标签
						var $input = $("#file");
						console.log($input)
		//            2、给input标签绑定change事件
						$input.on("change" , function(){
							console.log(this)
							//补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
							//获取选择图片的个数
							var files = this.files;
							var length = files.length;
							console.log("选择了"+length+"张图片");
							//3、回显
							$.each(files,function(key,value){
								//每次都只会遍历一个图片数据
								var div = document.createElement("div"),
										img = document.createElement("img");
								div.className = "pic";

								var fr = new FileReader();
								fr.onload = function(){
									img.src=this.result;
									div.appendChild(img);
									document.body.appendChild(div);
								}
								fr.readAsDataURL(value);
							})

						})

						// 4、我们把当前input标签的id属性remove
						$input.removeAttr("id");
						// 我们做个标记，再class中再添加一个类名就叫test
						var newInput = '';
						$(this).append($(newInput));


					})

				})





		function uploadFile(filePath) {
			$.modal.loading("文件上传中，请勿做其他操作，耐心等待"); //若依的遮罩
			var formData = new FormData();
			if ($("input[name='" + filePath + "']")[0].files[0] == null) {
				$.modal.alertWarning("请先选择文件路径");
				return false;
			}
			formData.append('file', $("input[name='" + filePath + "']")[0].files[0]);
			$.ajax({
				url: ctx + "imgUpload/testUpload",
				type: 'post',
				cache: false,
				data: formData,
				processData: false,
				contentType: false,
				dataType: "json",
				success: function (result) {
					$("#brandLogo").val(result.msg);
					$.modal.closeLoading(); //遮罩结束
				}
			});
		}

	</script>


</body>
</html>
